<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- element样式 -->
		<link rel="stylesheet" href="../index.css" />
		
		<script src="../vue.js"></script>
		<!-- element组建 -->
		<script src="../index.js"></script>
	</head>
	<body>
		<div id="app">
			<h3>基础的、简洁的标签页</h3>
			<!--
				通过value属性来指定当前选中的标签页
			-->
			<el-tabs value="second">
				<el-tab-pane label="用户管理" name="first">用户管理...</el-tab-pane>
				<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
				<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
				<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
			</el-tabs>
			<h3>选项卡样式的标签页</h3>
			<el-tabs value="first" type="card">
				<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
				<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
				<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
				<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
			</el-tabs>
			<h3>卡片化的标签页</h3>
			<el-tabs value="first" type="border-card">
				<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
				<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
				<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
				<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
			</el-tabs>
		</div>
	
		<script>
			new Vue({
				el:'#app',
				 methods:{
				 	 
				 }
			});
		</script>
	</body>
</html>
